<template>
    <div class="main">
        <!-- 顶部导航（组件复用） -->
        <!-- <my-top-nav></my-top-nav> -->

        <!-- 中部内容 -->
        <div class="center_context" style="height: calc(100vh - 70px)">

            <!--地图：哈哈，精彩内容开始辽……-->
            <div class="map-display" id="mapDiv">
            </div>


            <div class="navbtn-items" v-if=heatMapAnalystPanelShow
                @click="togglePanel('heatMapAnalystPanelVisible', 'heatMapAnalystFlag')" title="热力图" id="heatMapAnalystBtn">
                <img src="../assets/images/map_icons/relitu.png">
                <img v-show="heatMapAnalystFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
            </div>
            <!--热力图分析面板-->
            <div :class="{ 'layer-hide': heatMapAnalystPanelVisible }" id="rlt"
                style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
                <h3>热力图分析面板</h3>
                <label style="width: 54px;line-height: 17px">热力半径:</label><input id="radius" type="range" min="0.01" max="2"
                    step="0.01" v-model="heatmap_radius" value="500" /> <!--value="10"-->
                {{ this.heatmap_radius }} 度
                <!--热点半径：<input type="text" v-model="heatmap_radius" /> &lt;!&ndash;:value="heatmap_radius"&ndash;&gt;-->
                <br />
                <label style="width: 54px;line-height: 17px">模糊半径:</label><input id="blur" type="range" min="0.015" max="2"
                    step="0.01" v-model="heatmap_blur" /> <!--value="10"-->
                {{ this.heatmap_blur }} 度
                <!--模糊尺寸：<input type="text" v-model="heatmap_blur" />  &lt;!&ndash;:value="heatmap_blur"&ndash;&gt;-->
                <br /> <br />
                <input type="button" id="heatMapAnalyst" value="开始生成" />
                &nbsp;&nbsp;&nbsp;
                <input type="button" id="heatMapClear" value="清除" />
                <br />
            </div>

        </div> <!-- 中部内容结束 -->
    </div> <!-- 最外层Div结束 -->
</template>

<script>


import 'ol/ol.css';
import { Map, View, Overlay, Feature } from 'ol';
import { Tile, Vector as lVector, Heatmap as lHeatMap } from 'ol/layer';



export default {
    name: 'people',
    components: {
        // MyTopNav: TopNav
    },
    props: {
        /*mapCtrlTools:{
            type:Array,
            default:function () {
                return []
            }
        },
        lyrdata: {
            type: Array,
            default: []
        },
        mapParams: {
            type: Object,
            default: {}
        },*/
    },
    data() {
        return {
            /**功能组按钮控制**/
            heatMapAnalystPanelShow: true,//热力图分析-功能启动图标按钮，默认false不显示

            /**地图各悬浮面板的可视状态**/
            heatMapAnalystPanelVisible: true, //默认true为隐藏

            /*选中显示红色小标志*/
            heatMapAnalystFlag: false, //热力图分析-选中显示红色小标志，默认false为隐藏

            //热力图
            //heatmap_radius: 45, //热力图-热点半径；默认45
            //heatmap_blur: 70, //热力图-模糊尺寸；默认70
            heatmap_radius: 0.05,    //热力图-热点半径；可设置默认0.05
            heatmap_blur: 0.07,   //热力图-模糊尺寸；可设置默认0.07
        }

    },
    methods: {
        //切换面板功能函数
        togglePanel(attr, attr2) {
            this[attr] = !this[attr];
            this[attr2] = !this[attr2];
        },

        //地图初始化方法
        InitMap() {

            //初始化地图容器
            let map = new Map({
                target: 'mapDiv',
                view: new View({
                    center: [109.43, 33.48],
                    zoom: 7,
                    projection: 'EPSG:4326',
                }),
            });
            //region热力图
            let heatLayer = null;

            var eathquake = {
                "data": [
                    {
                        "magnitude": 5.9,
                        "coordinates": [
                            [-56.072, -60.975], [165.778, -46.686], [-177.386, -29.43], [157.837, -58.312], [-178.549, -17.968],
                            [-84.121, 9.183], [120.891, 22.661], [81.307, 39.383], [-175.702, -14.621], [89.441, 2.199], [93.821, 3.269],
                            [-112.587, -28.73], [143.311, 39.665], [142.082, 41.335], [139.536, -50.352], [-175.976, -19.962],
                            [-63.555, -22.059], [106.371, -7.692], [122.248, 24.572], [119.563, 15.593], [-128.893, -55.661],
                            [-178.508, -20.872], [173.789, -19.19], [-92.294, 14.191], [178.062, -16.02], [142.913, 42.419],
                            [155.75, 49.247], [143.218, 11.838], [-109.574, 25.127], [144.006, -54.217], [139.251, 29.057],
                            [148.27, -3.109], [-172.32, -18.381], [-71.868, -33.939], [-63.571, -22.742], [145.562, -3.423],
                            [-104.495, -4.178], [-73.255, -35.783]
                        ]
                    },
                    {
                        "magnitude": 5.8,
                        "coordinates": [[121.156, 19.202], [126.829, -0.877], [-174.035, -20.536], [123.08, 9.821], [141.386, 36.214],
                        [-127.518, 43.625], [65.405, -17.839], [125.633, 10.037], [-107.644, -34.905], [-13.972, -1.261],
                        [91.748, 1.271], [89.685, 1.841], [105.457, -6.81], [121.855, -2.64], [21.475, 36.632],
                        [93.36, 2.158], [140.349, 35.596], [143.836, -54.565], [-70.562, -25.729], [-179.61, -22.13],
                        [11.086, 44.851], [133.269, -0.72], [-176.34, -20.192], [-9.663, -24.747], [151.665, 45.452],
                        [156.132, 49.354], [-178.358, -21.15], [-98.905, -36.429], [128.697, 2.645], [123.875, 6.61],
                        [157.456, -8.838], [156.048, -7.145], [171.691, -22.312], [95.832, 22.72], [-150.76, 61.237],
                        [59.571, 33.506], [-178.186, -15.307]
                        ]
                    },
                ]
            };
            let attrStr = "magnitude";

            document.getElementById("heatMapAnalyst").addEventListener("click", function () {
                console.log("开始热力图分析");
                if (heatLayer) map.removeLayer(heatLayer);
                heatLayer = createHeatmapLayer(eathquake.data, parseInt(that.heatmap_blur, 10), parseInt(that.heatmap_radius, 10));
                map.addLayer(heatLayer);
            });

            document.getElementById("heatMapClear").addEventListener("click", function () {
                console.log("清除热力图");
                if (heatLayer) map.removeLayer(heatLayer);
            });

            function createHeatmapLayer(data, blur, radius) {
                let source = new lVectorVector({ wrapX: false })
                let features = []
                for (let i in data) {
                    //var att = parseFloat(data[i].magnitude) ;
                    var att = parseFloat(data[i][attrStr]); console.log(att, 257)
                    for (let j in data[i].coordinates) {
                        let newFeature = createFeature([parseFloat(data[i].coordinates[j][0]), parseFloat(data[i].coordinates[j][1])], att);
                        features.push(newFeature)
                    }
                }
                source.addFeatures(features)
                //创建热力图层
                let HeatmapLayer = new lHeatMap({
                    title: "生成的热力图",
                    source,
                    blur,
                    radius,
                    weight: 'weight'  //默认热力图层权值字段（0-1）
                });
                return HeatmapLayer
            }

            function createFeature(coordinates, att) {
                let tFeature = new Feature({
                    //geometry: new ol.geom["Point"](coordinates)
                    geometry: new Point(coordinates)
                });
                tFeature.set('weight', att - 5);
                return tFeature;
            }
            //endregion

            //初始化地图文档图层对象
            let myVecLayer9 = new Zondy.Map.GdbpLayer("", ["gdbp://MapGISLocalPlus/2023开发大赛/sfcls/玄奘西行途径城市"], {  
                ip: "jlu3s.com",
                port: "35017",                
                title: "玄奘西行途径城市-矢量图层", 
                visible: true, 
            });
            //别忘了把地图文档图层加载到地图中
            map.addLayer(myVecLayer9)


        },//end of InitMap()
        F2() {

        },
        F3() {

        },
        F4() {

        },
        F5() {

        },

    },
    created() {

    },
    mounted() {
        // 页面各元素挂载就绪后执行
        this.InitMap();
    },
    watch: {

    },
    computed: {

    }
}
</script>

<style scoped>
/* 地图容器基本样式 */
.map-display {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: darkgray;
}

/*地图工具栏相关样式  */
.mytool-btns {
    position: relative;
    /*left: 10px;*/
    margin-left: 2.5em;
    top: 10px;
    height: 60px;
    /*width:320px;*/
    /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    width: 450px;
    /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
}

.navbtn-items {
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
}

.navBtnDiv {
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
}

.navbtn-btn {
    margin-right: 10px;
}

.navbtn-items:hover {
    cursor: pointer;
}

.navbtn-items>img {
    width: 36px;
    height: 36px;
    padding: 5px;
}

.item-selected {
    position: absolute;
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
}</style>
